<template>
  <div class="app-container">
    <h1>设备</h1>
    <div style="display: flex;align-items: center;">
      <el-select v-model="productId" filterable placeholder="请选择">
        <el-option  key="-1" label="所有产品" value="" :disabled="''==productId ?true : false" ></el-option>
        <el-option
          v-for="item in productList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          :disabled="item.id ==productId ?true : false"  >
        </el-option>
      </el-select>
      <div style="display: inline-block;margin-left: 30px;margin-bottom: -30px;">
                <div style="display: inline-block;margin-left: 30px;">
                    <span style="height: 30px;">
                      设备总数
                      <i class="el-icon-question"></i>
                      <span >
                        <h3>{{ deviceNum }}</h3>
                      </span>
                    </span>
                </div>
                <div style="display: inline-block;margin-left: 30px;">
                    <span>
                      激活总数
                      <i class="el-icon-question"></i>
                    </span>
                    <span>
                        <h3>{{ deviceActiveNum }}</h3>
                    </span>

                </div>
                <div style="display: inline-block;margin-left: 30px;">
                    <span>
                      当前在线
                      <i class="el-icon-question"></i></span>
                    <h3>{{ 0 }}</h3>
                </div>
            </div>

  </div>
  <div style="margin-top: 10px;">
    <el-form :inline="true" class="demo-form-inline" >
      <el-form-item label="">
        <el-button
          @click="showAddDevice()"
          icon="el-icon-circle-plus-outline"
          type="success"
          >添加设备</el-button
        >
      </el-form-item>
    </el-form>
  </div>

    <el-table :data="devices" style="width: 100%">
      <el-table-column type="selection" />
      <!-- <el-table-column prop="name" label="设备名称" @click="showDetail(id)">
        <template>
          <el-button type="text">文字按钮</el-button>
        </template>
      </el-table-column> -->
      <el-table-column  label="设备名称" scope>
        <template slot-scope="scope">
          <el-button type="text" @click="showDetail(scope.row.id)">{{scope.row.name}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="product.name" label="所属产品"> </el-table-column>
      <el-table-column prop="deviceKey" label="deviceKey"> </el-table-column>
      <el-table-column label="设备激活状态" align="center">
          <!-- 自定义渲染 -->
          <template slot-scope="scope">
              <el-tag v-if="scope.row.active == 1" key="未激活" type="danger" effect="dark">
                  {{ '未激活' }}
              </el-tag>
              <el-tag v-if="scope.row.active == 2" key="激活" type="success" effect="dark">
                  {{ '激活' }}
              </el-tag>
          </template>
      </el-table-column>
      <!-- 设备类型为继电器时 有发送指令功能 -->
      <el-table-column prop="deviceType.name" label="开/关设备" align="center"> 
        <template slot-scope="scope">
          <el-tag v-if="!scope.row.deviceType.name.includes('继电')"  type="success" effect="plain">
              {{scope.row.deviceType.name }}
          </el-tag>
          <el-link type="danger" v-if="scope.row.deviceType.name.includes('继电')" :underline="false"
              @click="dialogFormVisible1 = true; showSwitch(scope.row.id)">
              发送指令
            </el-link>
      </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="showDetail(scope.row.id)"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            >详情</el-button
          >
          <el-button
            @click="delD(scope.row.id)"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <br />
    <el-pagination
      style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="devicePages.current"
      :page-sizes="[5, 10, 15, 50]"
      :page-size="devicePages.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="devicePages.total"
    >
    </el-pagination>
    
    <el-dialog title="添加设备" :visible.sync="dialogFormVisible">
      <el-form data="" :model="newDevice" ref="repoRef">
        <el-form-item label="产品">
          <br />
          <el-select v-model="newDevice.productId" placeholder="请选择">
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option> </el-select
          ><br />
        </el-form-item>
        <el-form-item label="设备类型">
          <br />
          <el-select v-model="newDevice.deviceTypeId" placeholder="请选择">
            <el-option
              v-for="item in deviceTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option> </el-select
          ><br />
        </el-form-item>

        <el-form-item label="设备编号(同一个产品下设备编号不能重复)">
          <el-input v-model="newDevice.deviceIndex" autocomplete="off"></el-input>
        </el-form-item>
        
        <el-form-item label="父设备（非必须项）">
          <br />
          <el-select v-model="newDevice.parentId" placeholder="请选择">
            <el-option
              v-for="item in devices"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option> </el-select
          ><br />
        </el-form-item>
        
        <el-form-item label="设备名称">
          <el-input v-model="newDevice.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.prevent="addDevice()"
          >确 定</el-button
        >
      </div>
    </el-dialog>


    <el-dialog title="发送指令" :visible.sync="dialogFormVisible1">
      <el-form  :model="currentDevice" ref="repoRef">
        <el-form-item label="设备名称">
          <el-input v-model="currentDevice.name" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        
        <el-form-item label="设备key">
          <el-input v-model="currentDevice.deviceKey" autocomplete="off" disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="继电器编号">
          <el-input v-model="currentDevice.deviceIndex" autocomplete="off" ></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item label="开关指令">
          <br />
          <el-select v-model="currentDevice.active" placeholder="请选择">
            <el-option 
              v-for="item in actives"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
            </el-select
          ><br />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.prevent="addDevice()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
  import {getAllList} from "@/api/product/product";
  import { getdeviceList,
    getDeviceTypeList,
    insertDevice,
    delDevice,
    getNumber,
    getActiveNumber,
    getCurrentDevice} from "@/api/device/device";
  import { decode } from "js-base64";
  export default {
    methods: {
      getDeviceList(pageNum,pageSize){
        this.devices=[];
        this.devicePages=[];
        getdeviceList(this.tid,this.productId,pageNum,pageSize).then((res)=>{
          if(res.data!=null){
            this.devices=res.data.records;
            this.devicePages=res.data;
   
          }
        })
      },
      getProductList() {
        getAllList(this.tid).then((res) => {
          if (res.data!=null) { 
            this.productList = res.data;
          }
          
          });
      },
      getDeviceTypeList(){
        getDeviceTypeList().then((res)=>{
          if (res.data != null) { 
            console.log(res.data);
            this.deviceTypeList = res.data;
          }
          // this.newDevice.deviceTypeId=this.deviceTypeList.id;
        })
      },
      handleSizeChange(val) {
        this.devicePages.size = val;
        this.getDeviceList(this.devicePages.current, this.devicePages.size);
      },
      handleCurrentChange(val) {
        this.productPages.current = val;
        this.getDeviceList(this.devicePages.current, this.devicePages.size);
      },
      showAddDevice(){
        this.dialogFormVisible=true;
      },
      addDevice(){
        insertDevice(this.newDevice).then((res)=>{
          alert(res.msg);
          console.log(res.data);
        })
        this.dialogFormVisible = false;
        this.getDeviceList();
      },
      delD(did){
        console.log(did);
        delDevice(did).then((res)=>{
          alert(res.msg);
          this.getDeviceList();
        })
      },
      // 跳转详情
      showDetail(did) {
            localStorage.setItem("did", did)
            this.$router.push({ path: "/device/deviceDetail" })
      },
      getDeviceNumber(){
          this.currentProduct.productId=this.productId;
          this.currentProduct.tenantId=this.tid;
          this.deviceNum=0;
          getNumber(this.currentProduct).then((res)=>{
              if(res.code==0){
                this.deviceNum=res.data;
              }
          })
      },
      getDeviceActiveNumber(){
          this.currentProduct.productId=this.productId;
          this.currentProduct.tenantId=this.tid;
          this.deviceActiveNum=0;
          getActiveNumber(this.currentProduct).then((res)=>{
            if(res.code==0){
              this.deviceActiveNum=res.data;
            }
          })
      },
      //发送指令
      showSwitch(did){
        getCurrentDevice(did).then((res)=>{
          this.currentDevice=res.data;
          if(this.currentDevice.active=2){
            this.currentDevice.active='开';
          }else{
            this.currentDevice.active='关';
          }
        })

      }


    },

    created() {
      var token = localStorage.getItem("token");
      var payload = token.substring(
        token.indexOf(".") + 1,
        token.lastIndexOf(".")
      );
      var user = JSON.parse(JSON.parse(decode(payload)).user);
      this.tid = user.id;
      this.getDeviceList();
      this.getProductList();
      this.getDeviceTypeList();
      this.getDeviceNumber();
      this.getDeviceActiveNumber();
      this.newDevice.tenantId=this.tid;

    },
    data() {
      return{
        productId:"",
        devices:[],
        devicePages:{},
        dialogFormVisible: false,
        dialogTableVisible: false,
        productList:[],
        deviceTypeList:[],
        tid:"",
        newDevice:{},
        currentProduct:{},
        deviceNum:"",
        deviceActiveNum:"",
        dialogFormVisible1:false,
        currentDevice:{},
        actives:[
          {
            value:2,
            label:'开'
          },
          {
            value:1,
            label:'关'
          }
        ]
      }
    },
    mounted() {

    },
    watch:{
      productId: function(){
          this.getDeviceList();
          this.getDeviceNumber();
          this.getDeviceActiveNumber();
      }
    }
  };
  
  </script>
  